import React, {FC, useState} from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
import MineStore from '../../stores/MineStore';
const TabLayout: FC = () => {
  const [tabIndex, setTabIndex] = useState<number>(0);
  return (
    <View style={styles.tabLayout}>
      <TouchableOpacity
        style={styles.tabItem}
        onPress={() => {
          setTabIndex(0);
          MineStore.setTabIndex(0);
        }}>
        <Text style={tabIndex === 0 ? styles.activeTabTxt : styles.tabTxt}>
          笔记
        </Text>
        {tabIndex === 0 && <View style={styles.line} />}
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.tabItem}
        onPress={() => {
          setTabIndex(1);
          MineStore.setTabIndex(1);
        }}>
        <Text style={tabIndex === 1 ? styles.activeTabTxt : styles.tabTxt}>
          收藏
        </Text>
        {tabIndex === 1 && <View style={styles.line} />}
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.tabItem}
        onPress={() => {
          setTabIndex(2);
          MineStore.setTabIndex(2);
        }}>
        <Text style={tabIndex === 2 ? styles.activeTabTxt : styles.tabTxt}>
          赞过
        </Text>
        {tabIndex === 2 && <View style={styles.line} />}
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  tabLayout: {
    width: '100%',
    height: 48,
    backgroundColor: 'white',
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
  },
  tabItem: {
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 10,
  },
  activeTabTxt: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  tabTxt: {
    color: '#990',
    fontSize: 16,
    marginBottom: 4,
  },
  line: {
    backgroundColor: 'red',
    width: 30,
    height: 2,
  },
});
export default TabLayout;
